<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绩效考核管理系统</title>
    <meta name="description" content="绩效考核管理系统">
    <meta name="keywords" content="绩效考核管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>团队工作上报管理<small>团队工作上报</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item>团队工作</el-breadcrumb-item>
                <el-breadcrumb-item>新建上报</el-breadcrumb-item>
                <el-breadcrumb-item><span style="font-weight: bolder">选择成员与模式</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <!--表格-->
                <div>
                    <span>选择填报模式：</span>
                    <template>
                        <el-radio v-model="radio" label="1">模板复制模式</el-radio>
                        <el-radio v-model="radio" label="2">按人填报模式</el-radio>
                    </template>
                </div>
                <hr>
                <div style="margin-bottom: 10px"><span>选择团队成员：</span></div>
                <template v-for="(department,index) in departments">
                    <el-checkbox :indeterminate="isIndeterminate[index]" v-model="checkAll[index]" @change="handleCheckAllChange(index)">{{department.department}}</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checkedMembers[index]" @change="handleCheckedMembersChange(index)">
                        <el-checkbox v-for="member in department.children" :label="member" :key="member">{{member.username}}</el-checkbox>
                    </el-checkbox-group>
                </template>
                <hr style="height:2px;border-radius: 3px; background-color: #3c8dbc">
                <div class="buttons" style="text-align: center">
                    <el-button type="primary" @click="resetChecked" plain>清空重选</el-button>
                    <el-button type="success" @click="getCheckedNodes" plain>提交</el-button>
                    <el-button type="danger" @click="giveUp()" plain>放弃填报</el-button>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:function () {
            return {
                <!--与上报模式（单选）相关的参数-->
                radio: '1',
                <!--与人员（多选框）相关的参数-->
                departments:[],
                checkAll:[],
                checkedMembers:[],
                isIndeterminate: [],
                memberOptions:[],
            };
        },
        created() {
            this.findAll();
        },
        methods: {
            handleCheckAllChange(index) {
                console.log(this.memberOptions[index]);
                console.log(typeof this.checkAll[index]);
                if(this.checkAll[index] == true){
                    for (let i = 0 ; i < this.memberOptions[index].length; i++){
                        this.checkedMembers[index][i]=this.memberOptions[index][i];
                    }
                }else{
                    this.checkedMembers[index] = [];
                }
                console.log(this.checkedMembers[index]);
                this.isIndeterminate[index] = false;
            },
            handleCheckedMembersChange(index) {
                // console.log(index);
                // console.log(this.checkAll);
                // console.log(this.checkedMembers);
                // console.log(this.isIndeterminate);
                // let checkedCount = value.length;
                // this.checkAll[index] = checkedCount === this.departments[index].children.length;
                // this.isIndeterminate[index] = checkedCount > 0 && checkedCount < this.departments[index].children.length;
            },
            findAll(){
                axios.get("/kpi_assess/departmentEmployees").then((resp)=>{
                    console.log(resp.data.data);
                    this.departments = resp.data.data;
                    let departmentsLength = resp.data.data.length;
                    // let t1 = [];
                    // let t2 = [];
                    for (let i = 0; i < departmentsLength; i++) {
                        this.checkAll[i] = false;
                        this.isIndeterminate[i]=true;

                        let t = [];
                        for (let j = 0; j < this.departments[i].children.length; j++) {
                            t[j] =  this.departments[i].children[j].username;
                        }
                        // t1.push(t);
                        this.memberOptions.push(t);
                        this.checkedMembers.push([]);
                    }
                    // this.memberOptions = t1;
                    // this.checkedMembers = t2;
                    console.log(1111);
                    console.log(this.memberOptions);
                    console.log(this.checkedMembers);
                    console.log(2222);
                });
            },
            <!--放弃填报-->
            giveUp(){
                //跳转到首页
                window.location.href="welcome.html";
            },
        }
    })
</script>
</html>